<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<style>
		*{margin:0;padding: 0;}
		#box{width:400px;height:200px;position:relative;left: 100px;top: 100px;}
		#list{width: 400px;height: 200px;position: relative;}
		#list li{list-style: none;position: absolute;opacity: 0;filter:alpha(opacity: 0)}
		#list li.first{opacity: 1;filter:alpha(opacity: 100)}
		img{width: 400px;height: 200px;}
		#circle{position: absolute;left:25%;bottom: 0;z-index: 10;height: 10px;}
		#circle a{float: left;margin:0 10px;width: 15px;height: 10px;border-radius: 50%;background: #999;}
		#circle .active{background: red;}
		#direction a{display: block;width: 60px;height: 40px;font-size: 20px;background:rgba(0,0,0,.6);text-align: center;line-height: 40px;color: #fff;text-decoration: none;position: absolute;top: 80px;}
		#direction a.last{right: 0;}
	</style>

</head>
<body>
	<div id="box">
		<ul id="list">
			<li class="first">
				<img src="images/1.jpg" alt="">
			</li>
			<li>
				<img src="images/2.jpg" alt="">
			</li>
			<li>
				<img src="images/3.jpg" alt="">
			</li>
			<li>
				<img src="images/4.jpg" alt="">
			</li>
		</ul>
		<div id="circle">
			<a href="#" class="active"></a>
			<a href="#"></a>
			<a href="#"></a>
			<a href="#"></a>
		</div>
		<div id="direction">
			<a href="#"><</a>
			<a href="#" class="last">></a>
		</div>
	</div>
</body>
</html>
<script src="pool.js"></script>
<script>
window.onload = function(){
	var obox = document.getElementById("box");
	var oList = document.getElementById("list");
	var aLi = oList.getElementsByTagName("li")
	var circle = document.getElementById("circle");
	var aA = circle.getElementsByTagName("a");
	var direction = document.getElementById("direction");
	var dir = direction.getElementsByTagName("a");
	var iNow = 0;
	var next = 0;
	var timer = null;
	dir[0].onclick = function(){
		if(next<=0){
			next=aLi.length-1;
		}else{
			next--;
		}
		toImg();
	}

	dir[1].onclick = function(){
		if(next>=aLi.length-1){
			next=0;
		}else{
			next++;
		}
		toImg();
	}

	for(var i=0;i<aA.length;i++){
		aA[i].index=i;
		aA[i].onclick = function(){
			for(var j=0;j<aA.length;j++){
				aA[j].className="";
				move(aLi[j],{"opacity":0});
			}
			aA[this.index].className = "active";
			move(aLi[this.index],{"opacity":100});
			next = this.index;
			iNow = next;
		}
	}

	obox.onmouseover = function(){
		clearInterval(timer);
	}

	obox.onmouseout = function(){
		autoPlay();
	}
	
	autoPlay();
	function autoPlay(){
		timer = setInterval(function(){
			if(next>=aLi.length-1){
				next=0;
			}else{
				next++;
			}
			toImg();
		},1000)
	}

	function toImg(){
		move(aLi[iNow],{"opacity":0});
		move(aLi[next],{"opacity":100});
		for(var i=0;i<aA.length;i++){
			aA[i].className = "";
		}
		aA[next].className = "active";
		iNow=next;
	}
}

</script>